<template>
  <div>
    <!-- 头部开始 -->
    <el-card class="box-card">
      <div class="text item">居民管理</div>
    </el-card>
    <!-- 头部结束 -->
    <!-- 头部表单开始 -->
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="楼栋ID" class="one a">
        <Cascader class="qwer qwert" :changeBuiid="changeBuiid"/>
      </el-form-item>
      <el-form-item label="姓名" class="two a">
        <el-input
          v-model="formInline.name"
          placeholder="居民姓名"
          class="two2"
        ></el-input>
      </el-form-item>
      <el-form-item label="电话" class="three a">
        <el-input
          v-model="formInline.mobile"
          placeholder="居民电话"
          class="three3"
        ></el-input>
      </el-form-item>
      <el-form-item label="房间号" class="four a">
        <el-input
          v-model="formInline.houseno"
          placeholder="房间号"
          class="four4"
        ></el-input>
      </el-form-item>
      <el-form-item label="用户类型" class="five a">
        <el-select
          v-model="formInline.usertype"
          placeholder="请选择"
          class="five5"
        >
          <el-option
            v-for="(item, index) in peopletype"
            :key="index"
            :value="item.name"
            >{{ item.name }}</el-option
          >
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit" class="a six"
          >查询</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 头部表单结束 -->
    <!-- 按钮开始 -->
    <el-row class="btn">
      <el-button type="primary" @click="dialogVisible = true">添加</el-button>
      <el-button type="success" @click="delects">批量删除</el-button>
      <el-button type="danger"  @click="amendtype">批量审核</el-button>
    </el-row>
    <!-- 按钮结束 -->
    <!-- 表单开始 -->
    <StandA :tableData="tableData" :tableHead="tableHead" @amends="amends" @delect="delect" @handleSelectionChange="handleSelectionChange" class="table"/>
    <!-- 表单结束 -->
    <!-- 底部分页开始 -->
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="formInline.page"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
      >
      </el-pagination>
    </div>
    <!-- 底部分页结束 -->
    <!-- 添加弹框开始 -->
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose"
    >
      <div class="center">
        <div class="left">
          <div class="first">
            <div class="div">头像</div>
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
          <div class="blockone">
            <span class="demonstration">楼栋</span>
            <Cascader class="qwer qwert" @changeBuiid="changeBuiid"/>
          </div>
          <div class="blocks">
            <el-form :inline="true" :model="add" class="demo-form-inline to">
            <el-form-item label="房间号">
              <el-select v-model="add.houseno" class="qwer">
                <el-option label="123" value="1"></el-option>
              </el-select>
            </el-form-item>
            </el-form>
          </div>
          <div class="blocks qaz">
            <el-form :inline="true">
              <el-form-item label="姓名">
                <el-input class="qwer qwert ipt" v-model="add.name"></el-input>
              </el-form-item>
            </el-form>
          </div>
          <div class="blocks">
            性别
            <el-radio v-model="add.sex" label="1">男</el-radio>
            <el-radio v-model="add.sex" label="2">女</el-radio>
          </div>
        </div>
        <div class="right">
          <el-form :inline="true" :model="add" class="demo-form-inline">
            <el-form-item label="民族" class="ipt">
              <el-input v-model="add.nation"></el-input>
            </el-form-item>
            <el-form-item label="籍贯" class="ipt">
              <el-input v-model="add.usernative"></el-input>
            </el-form-item>
            <el-form-item label="身份证号" class="ipt">
              <el-input v-model="add.cardid"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" class="ipt">
              <el-input v-model="add.mobile"></el-input>
            </el-form-item>
            <el-form-item label="住户类型">
              <el-select v-model="add.usertype" placeholder="活动区域" class="ipt">
                <el-option label="区域一" value="1"></el-option>
                <el-option label="区域二" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addpeoples">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改框开始 -->
    <el-dialog
      title="提示"
      :visible.sync="disable"
      width="40%"
      :before-close="handleClose"
    >
      <div class="center">
        <div class="left">
          <div class="first">
            <div class="div">头像</div>
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>
          <div class="blockone">
            <span class="demonstration">楼栋</span>
            <Cascader />
          </div>
          <div class="blocks">
            <el-form :inline="true" :model="amend" class="demo-form-inline to">
            <el-form-item label="房间号">
              <el-select v-model="amend.photo" class="qwer">
                <el-option label="123" value="123"></el-option>
              </el-select>
            </el-form-item>
            </el-form>
          </div>
          <div class="blocks qaz">
            <el-form :inline="true">
              <el-form-item label="姓名">
                <el-input class="qwer qwert" v-model="amend.name"></el-input>
              </el-form-item>
            </el-form>
          </div>
          <div class="blocks">
            性别
            <el-radio v-model="amend.sex" label="1">男</el-radio>
            <el-radio v-model="amend.sex" label="2">女</el-radio>
          </div>
        </div>
        <div class="right">
          <el-form :inline="true" :model="amend" class="demo-form-inline">
            <el-form-item label="民族">
              <el-input v-model="amend.nation"></el-input>
            </el-form-item>
            <el-form-item label="籍贯">
              <el-input v-model="amend.usernative"></el-input>
            </el-form-item>
            <el-form-item label="身份证号">
              <el-input v-model="amend.cardid"></el-input>
            </el-form-item>
            <el-form-item label="联系电话">
              <el-input v-model="amend.mobile"></el-input>
            </el-form-item>
            <el-form-item label="住户类型">
              <el-select v-model="amend.usertype" placeholder="活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisibles = false">取 消</el-button>
        <el-button type="primary" @click="amends">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 修改款结束 -->
  </div>
</template>

<script>
import Cascader from '../components/building/cascader.vue'
import StandA from '../components/common/tables.vue'
import axios from "axios";
import {delectss,amendqwe,addpeople} from '../utils/utils'
export default {
  components:{
    StandA,
    Cascader
  },
  data() {
    return {
      buidValue:'',
      dialogVisible:false,
      dialogVisibles:false,
      tableData:[
        
      ],
      tableHead:[
        {
          prop:'id',
          lable:'id'
        },
        {
          prop:'photo',
          lable:'头像',
          type:'img'
        },
        {
          prop:'name',
          lable:'姓名'
        },
        {
          prop:'usertype',
          lable:'业主类型'
        },
        {
          prop:'sex',
          lable:'性别'
        },
        {
          prop:'cardid',
          lable:'身份证号'
        },
        {
          prop:'mobile',
          lable:'手机号'
        },
        {
          prop:'usernative',
          lable:'籍贯'
        },
        {
          prop:'nation',
          lable:'民族'
        },
        {
          prop:'building',
          lable:'小区'
        },
        {
          prop:'houseno',
          lable:'房间号'
        },
        {
          prop:'stateName',
          lable:'审核状态'
        },
        {
          lable:'操作',
          type:'button',
          button:{
            first:true,
            second:true
          }
        },
      ],
      qwerty:"",
      multipleSelection: [],
      disable:false,
      add: {
        id: 0,
        photo: "",
        name: "",
        houseid: "",
        usertype: "",
        sex: "",
        mobile: "",
        usernative: "",
        cardid: "",
        nation: "",
      },
      amend: {
        id: 1555,
        photo: "",
        name: "",
        houseid: "",
        usertype: "",
        sex: "",
        mobile: "",
        usernative: "",
        cardid: "",
        nation: "",
        houseno:''
      },
      radio: "1",
      input: "",
      imageUrl: "",
      peopletype: [],
      page: 1,
      psize: 10,
      formInline: {
        key: "",
        name: "",
        mobile: "",
        houseno: "",
        state: "",
        usertype: "",
        buildingid: "",
        page: 1,
        psize: 5,
      },
      tableData: [],
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,

      value: [],
    }
  },
  methods: {
    changeBuiid(val){
      // console.log(val);
      this.add.houseid=val
      this.formInline.houseno=val
    },
    dialogFn(d) {
        this.dialogVisible=d
    },
    async amends(val){
      // console.log(val);
      this.dialogVisible=true
      let res=await amendqwe({
        id:val.id,
        name:this.amend.name,
        usernative:this.amend.usernative,
        sex:this.amend.sex,
        mobile:this.amend.mobile,
        cardid:this.amend.cardid,
        nation:this.amend.nation,
        usertype:this.amend.usertype,
        houseno:this.amend.houseno
      })
      // console.log(res);
    },
    // 修改
    // 批量审核
    async amendtype(){
       let self=this
      if(this.qwerty.length==0){
        this.$message({
          type:"warning",
          message:'请先选择表格数据'
        })
      }else{
        let ids=[]
        self.qwerty.forEach((item)=>{
          ids.push(item.id)
        })
        let res=await amendtype({
          ids:ids
        })
        if(res.errCode=='10000'){
          this.getlist()
         this.$message({
           type:'success',
           message:'修改成功'
         })
        }
      }
    },
    handleSelectionChange(val){
      // console.log(val);
      this.qwerty=val
    },
    async delects(){
      let self=this
      if(this.qwerty.length==0){
        this.$message({
          type:"warning",
          message:'请选择要删除的人员'
        })
      }else{
        let ids=[]
        self.qwerty.forEach((item)=>{
          ids.push(item.id)
        })
        let res=await delectss({
          ids:ids
        })
        console.log(res);
        if(res.errCode=='10000'){
          this.getlist()
         this.$message({
           type:'success',
           message:'删除成功'
         })
        }
        
      }
      
    },
    // 添加居民
    async addpeoples() {
      // console.log(d);
      // console.log(this.buidValue);
        let res=await addpeople({
         name:this.add.name,
          houseid:this.add.houseid,
          usernative:this.add.usernative,
          sex:this.add.sex,
          mobile:this.add.mobile,
          cardid:this.add.cardid,
          nation:this.add.nation,
          usertype:this.add.usertype,
          houseno:this.add.houseno
        })
        // console.log(this.add);
        // console.log(res);
        if(res.errCode=='10000'){
          this.getlist()
          this.dialogVisible = false
        }
        // console.log(this.add.houseid);
    },
    // 控件
    handleChange(value) {
      // console.log(value);
    },
    // 头像上传
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    // 添加居民
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    // 居民类型
    gettype() {
      const params = {
        Authorization: sessionStorage.getItem("token"),
      };
      axios
        .get("http://estate.eshareedu.cn/estate/api/userinfotype/list", {
          headers: params,
        })
        .then((res) => {
          // console.log(res);
          // this.peopletype = res.data.data.list;
          // console.log(this.peopletype);
          // console.log(123);
        });
    },
    // 单删
    delect(val){
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
         axios.get('http://estate.eshareedu.cn/estate/api/userinfo/delete?id='+val.id,{Authorization:sessionStorage.getItem('token')}).then(res=>{
        this.getlist()
      })
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });


      
    },
    // 分页
    onSubmit() {
      const list = this.formInline;
      const parms = {
        Authorization: sessionStorage.getItem("token"),
      };
      axios
        .get("http://estate.eshareedu.cn/estate/api/userinfo/list", {
          headers: parms,
          params: list,
        })
        .then((res) => {
          this.tableData = res.data.data.list;
          // console.log(res);
        });
    },
    handleSizeChange(val) {
      this.formInline.psize = val;
      this.getlist();
    },
    handleCurrentChange(val) {
      this.formInline.page = val;
      this.getlist();
    },
    //居民列表
    getlist() {
      const parms = {
        Authorization: sessionStorage.getItem("token"),
      };
      // console.log(parms);
      axios
        .get("http://estate.eshareedu.cn/estate/api/userinfo/list", {
          headers: parms,
          params: this.formInline,
        })
        .then((res) => {
          // console.log(res);
          this.tableData = res.data.data.list;
          // this.getlist()
        });
    },
  },
  mounted() {
    this.gettype();
    this.getlist();
    // this.getlist()
    // this.delect()
  },
};
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}
.block {
  text-align: center;
}
.text {
  font-size: 16px;
  text-align: left;
  color: blue;
}

.box-card {
  width: 100%;
}
.demo-form-inline {
  text-align: left;
  margin-left: 40px;
  margin-top: 15px;
}
.one .one1 {
  width: 170px;
}
.two .two2 {
  width: 120px;
}
.three .three3 {
  width: 160px;
}
.four .four4 {
  width: 120px;
}
.five .five5 {
  width: 120px;
}
.a {
  margin-left: 10px;
  margin-right: 20px;
}
.six {
  width: 120px;
  margin-left: 40px;
}
.btn {
  text-align: left;
  margin-left: 45px;
}
.table {
  margin-left: -30px;
  margin-top: 40px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
}
.avatar {
  width: 20px;
  height: 20px;
  display: block;
}
.center {
  display: flex;
  justify-content: space-between;
}
.right {
  width: 400px;
}
.first {
  width: 200px;
  height: 100px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.qwer {
  width: 150px;
  margin-left: 20px;
}
.qwert{
  margin-left: 40px;
}
.blocks {
  margin-left: 20px;
  margin-top: 20px;
}
.blockone { 


  margin-left: 34px;
  margin-top: 20px;
}
.to{
  margin-left: -5px;
}
.qaz{
  margin-top:-5px;
}
.ipt{
  margin-top: 20px ;
}
</style>
